import React, { useState } from 'react'
import './walletHome.scss'
import { Toast, NavBar, Cell, Button } from 'react-vant';
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { Input } from 'antd-mobile'
import { Link,useNavigate  } from 'react-router-dom';
export default function WalletHome() {
    const [value, setValue] = useState('12345')
    const [visible, setVisible] = useState(false)
    const navigate = useNavigate();
    const handleGoBack = () => {
        navigate(-1); // 返回上一页
    };

    return (
        <div className='wallet'>
            <div className='top'>
                <NavBar
                    title="我的钱包"
                    leftText=""
                    onClickLeft={() => handleGoBack('')}
                    className="navBarWithWhiteText"
                    border={false}
                    style={{
                        backgroundColor: 'rgba(112, 138, 245, 1.0)', // 设置背景色为蓝色
                    }}
                />
                <div className='password'>
                    <span>账户余额(元)</span>
                    <div className='eye'>
                        {!visible ? (
                            <EyeInvisibleOutline onClick={() => setVisible(true)} />
                        ) : (
                            <EyeOutline onClick={() => setVisible(false)} />
                        )}
                    </div>
                </div>
                <Input
                    className='input'
                    placeholder='请输入密码'
                    value={'￥' + value}
                    type={visible ? 'text' : 'password'}
                />

            </div>
            <div className='bottom'>
            <Link to="/zhi"> <Cell title="绑定支付宝" isLink /></Link>
            <Link to="/password"><Cell title="支付密码设置" isLink /></Link>
            <Cell title="我的账单" isLink />
            <Link to="/withdraw"><Button type='primary' className='W-btn'>申请提现</Button></Link>
            </div>
        </div>
    )
}
